﻿    
<div class="ui-widget ui-corner-all">
    <div class="ui-widget-header">Test Configuration Settings</div>
    <div class="ui-widget-content">

        <div class="ui-widget ui-corner-all" style="width:300px;">
            <div class="ui-widget-header">
               Test Pushover Notification
            </div>
            <div class="ui-widget-content my-form" id="PushoverTestForm" >
               <table>
                   <tr>
                       <th>Username:</th>
                       <td><select id="PushoverUsersDropdown"></select></td>

                   </tr>
                   <tr>
                       <th>Title:</th>
                       <td>
                           <input type="text" id="PushoverTitle" />
                       </td>
                   </tr>

                    <tr>
                       <th>Message:</th>
                        <td><textarea id="PushoverMessage"></textarea></td>
                    </tr>

                    <tr class="my-button-row">
                        <td colspan="2">
                            <span class="my-button" icon="ui-icon-signal-diag" onclick="TrySendPushoverTest();">Send</span>
                        </td>
                    </tr>
                   </table>

            </div>
        </div>

        <div class="ui-widget ui-corner-all" style="width:300px;">
            <div class="ui-widget-header">
               Test Email Notification
            </div>
            <div class="ui-widget-content my-form" id="EmailTestForm" >
               <table>
                   <tr>
                       <th>Username:</th>
                       <td><select id="EmailTestUserDropdown"></select></td>

                   </tr>
                   <tr>
                       <th>Subject:</th>
                       <td>
                           <input type="text" id="EmailSubject" />
                       </td>
                   </tr>

                    <tr>
                       <th>Message:</th>
                        <td><textarea id="EmailMessage"></textarea></td>
                    </tr>

                    <tr class="my-button-row">
                        <td colspan="2">
                            <span class="my-button" icon="ui-icon-mail-closed" onclick="TrySendEmailTest();">Send</span>
                        </td>
                    </tr>
                   </table>

            </div>
        </div>  

    
        <div class="ui-widget">
            <div class="ui-widget-header">KSTest</div>
            <div class="ui-widget-content">
                <span class="my-button" onclick="DoKsTest();">Do KS Test Tes</span>
            </div>
        </div>

        <div class="ui-widget ui-corner-all" style="width: 300px;" >
            <div class="ui-widget-header">
                Growl Notifications
            </div>
            <div class="ui-widget-content">
                
                <p><span id="normal">Normal</span></p>
                <p><span id="highlight">Highlight</span></p>
                <p><span id="error">Error</span></p>
        
                <p>
            
                    Progress: <span id="progressbar" style='width: 300px;'>
                
                    </span><span class="progress-status">Loading...</span>
                </p>
        
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">

    ///<reference path="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" />
    ///<reference path="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js" />
    ///<reference path="js/lib.js" />
 

    $(document).ready(function ()
    {
        console.log("test");


        $("#normal").click(function ()
        {
            Growl($(this).text());
        });

        $("#highlight").click(function ()
        {
            GrowlHighlight($(this).text());
        });

        $("#error").click(function ()
        {
            GrowlError($(this).text());
        });


        GetJsonSproc("usp_GetUsers", {}, function (json)
        {
            $("#PushoverUsersDropdown, #EmailTestUserDropdown").empty();
            $("#PushoverUsersDropdown, #EmailTestUserDropdown").append("<option value=-1>---</option>");
            $.each(json, function (key, value)
            {
                $("#PushoverUsersDropdown, #EmailTestUserDropdown").append("<option value=" + value["Username"] + ">" + value["Username"] + "</option>");
            });
        });

    });

   /* $("#progressbar").progressbar(
    {
        max: 10000,
        complete: function (evt, ui) { $(this).parent().children(".progress-status").text("Done") },
        change: function ()
        {
            var max = $(this).progressbar("option", "max");
            var v = $(this).progressbar("value");
            var p = new Number((v / max) * 100.00);

            v = Math.round(v);

            $(this).parent().children(".progress-status").text(v + " / " + max + " (" + p.toPrecision(4) + "%)");
        }
    });*/

   /* function StepProgressForward()
    {

        var v = $("#progressbar").progressbar("value");
        v += 140;

        var max = $("#progressbar").progressbar("option", "max");
        $("#progressbar").progressbar("value", v);
        //    $("#status").text(v + "%");
        if (v >= max)
            return;

        setTimeout(StepProgressForward, 1000);

    }

    setTimeout(StepProgressForward, 1000);

    */



   
    function DoKsTest()
    {
        GetJsonNonSproc("KSTEST",
           {
               DataRun1: "3",
               DataRun2: "3"            
           },
       function (r) {
           alert(r);
       });
    }

    function TrySendPushoverTest()
    {
        $("#PushoverTestForm select").removeClass("ui-state-error");
        $("#PushoverTestForm textarea, #PushoverTestForm input").removeClass("ui-state-error");
        var ok = true;

        if (SelectNotSelcted("#PushoverUsersDropdown"))
            ok = false;
        
        if (FieldIsEmpty("#PushoverMessage"))
            ok = false;

        if (FieldIsEmpty("#PushoverTitle"))
            ok = false;
        
        if (ok)
        {
            GetJsonNonSproc("PUSHOVERTEST",
            {
                Username: $("#PushoverUsersDropdown").val(),
                PushoverMessage : $("#PushoverMessage").val(),
                PushoverTitle: $("#PushoverTitle").val()
            },
        function(r)
        {
            
            $("#PushoverMessage, #PushoverTitle").val("");
            $("#PushoverUsersDropdown").val("-1");
            //ShowAlert("Test Notification Sent", "Test Pushover notification has been sent!");
            Growl("Test Pushover notification sent.");
        });
        
        }


    }

    function TrySendEmailTest()
    {
             
      
        $("#EmailTestForm select").removeClass("ui-state-error");
        $("#EmailTestForm textarea, #EmailTestForm input").removeClass("ui-state-error");
        var ok = true;

        if (SelectNotSelcted("#EmailTestUserDropdown"))
            ok = false;

        if (FieldIsEmpty("#EmailMessage"))
            ok = false;

        if (FieldIsEmpty("#EmailSubject"))
            ok = false;

        if (ok)
        {
            GetJsonNonSproc("EMAILTEST",
            {
                Username: $("#EmailTestUserDropdown").val(),
                EmailMessage: $("#EmailMessage").val(),
                EmailSubject: $("#EmailSubject").val()
            },
        function (r)
        {

            $("#EmailMessage, #EmailSubject").val("");
            $("#EmailTestUserDropdown").val("-1");
            //ShowAlert("Test Notification Sent", "Test Email notification has been sent!");
            //Notify("Test Email notification sent.");
            Growl("Test Email Notification sent.");
        });

        }


    }

    function ShowAlert(title, text)
    {
        $("#ModalAlertDivText").text(text);

        $("#ModalAlertDiv").dialog(
            {
                resizable: false,
                title : title,
                //height:140,
                modal: true,
                buttons: 
                    {
                        "OK": function ()
                        {
                            $(this).dialog("close");
                        }
                    }
                });
    }

</script>